<script setup>
const props = defineProps({
  swipeData: {
    type: Array,
    default: () => []
  }
})

// 对数据进行转换
const swipeGroup = {}

// 思路二：一次循环（性能较好）
for (const item of props.swipeData) {
  let valueArray = swipeGroup[item.enumPictureCategory]

  // valueArray 没有取到值时
  if (!valueArray) {
    valueArray = []
    swipeGroup[item.enumPictureCategory] = valueArray
  }

  valueArray.push(item)
}

// 思路一：好理解，两次循环（性能较差）
// for(const item of props.swipeData) {
//   swipeGroup[item.enumPictureCategory] = []
// }

// for(const item of props.swipeData) {
//   const valueArray = swipeGroup[item.enumPictureCategory]
//   valueArray.push(item)
// }


// 正则表达式：() 表示分组
// 正则表达式(.*?)惰性匹配()
/*
特别注意最后一条
  1、. 匹配任意除换行符“\n”外的字符；
  2、*表示匹配前一个字符0次或无限次；
  3、?表示前边字符的0次或1次重复
  4、+或*后跟？表示非贪婪匹配，即尽可能少的匹配，如*？重复任意次，但尽可能少重复；
  5、 .*? 表示匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。
  如：a.*?b匹配最短的，以a开始，以b结束的字符串。如果把它应用于aabab的话，它会匹配aab和ab。
*/
// 定义转换数据的方法
const nameReg = /【(.*?)】/i
const getName = (name) => {
  // 方式1：String.replace()
  // return name.replace("：", "").replace("【", "").replace("】", "")
  // 方式2：正则表达式
  const result = nameReg.exec(name)
  return result[1]
}

//
const getCategorydex = (item) => {
  const valueArray = swipeGroup[item.enumPictureCategory]
  return valueArray.findIndex(data => data === item) + 1
}
</script>

<template>
  <div class="swipe">
    <van-swipe class="swipe-list" :autoplay="3000" indicator-color="white">
      <template v-for="(item, index) in swipeData">
        <van-swipe-item class="item">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </template>

      <!-- 具名插槽 &作用域插槽 & 解构赋值 -->
      <!-- 
        active 当前显示的轮播图的索引值
        total 轮播图片的总数
      -->
      <!-- <template #indicator="{ active, total }">
        <div class="indicator">{{ active + 1 }}/{{ total }}</div>
      </template> -->
      <!-- <template #indicator="props"> -->
      <template #indicator="{ active, total }">
        <div class="indicator">
          <!-- v-for 遍历对象 -->
          <template v-for="(value, key, index) in swipeGroup">
            <!-- 方式1：使用 + 号将字符串数据转换为数值 -->
            <!-- <span class="item" 
              :class="{ active: swipeData[active].enumPictureCategory === +key}"> -->
            <!-- 
              方式2：使用 == 进行比较
              tips：== 运算符会进行隐式类型转换，如：
                同一个数据的字符串类型和数值类型的比较是 true
             -->
             <!-- 首次加载时，swipeData 没有值，为防止报错，使用可选链运算符 -->
            <span class="item" :class="{ active: swipeData[active]?.enumPictureCategory == key}">
              <span class="text">{{ getName(value[0].title) }}</span>
              <span class="count" v-if="swipeData[active]?.enumPictureCategory == key">
                {{ getCategorydex(swipeData[active]) }} / {{ swipeGroup[key].length }}
              </span>
            </span>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<style lang="less" scoped>
.swipe {
  .swipe-list {
    .item {
      img {
        width: 100%;
      }
    }

    .indicator {
      position: absolute;
      display: flex;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      background: rgb(0, 0, 0);

      .item {
        margin: 0 3px;

        &.active {
          padding: 0 3px;
          border-radius: 5px;
          background-color: #fff;
          color: #333;
        }
      }
    }
  }
}
</style>